import { Tooltip, Tag } from 'antd'
import { useStreams } from '@/lib/utils'
import services from '@/services'

export function Versions() {
  const [versions] = useStreams(services.appInfo.versions$)
  return <Tooltip color="#ffffff" title={<Detail />} placement="bottom">
    <span css={styles.versions}>{versions.ui ? `v${versions.ui}` : ''}</span>
  </Tooltip>
}

function Detail() {
  const [versions] = useStreams(services.appInfo.versions$)
  return <div css={styles.detail}>
    <div>
      <Tag color="processing" bordered={false}>
        界面
      </Tag>
      <span>{versions.ui}</span>
    </div>
    <div>
      <Tag color="processing" bordered={false}>
        接口
      </Tag>
      <span>{versions.api}</span>
    </div>
  </div>
}

const styles = {
  versions: css`
    color: rgba(85, 85, 85, 0.65);
    cursor: pointer;
    font-size: 14px;
    margin: 0;
    padding-top: 2px;
  `,
  detail: css`
    color: rgba(85, 85, 85, 0.65);
    font-size: 12px;
    padding: 0.6em 1em;
    & > div:not(:last-child) {
      margin-bottom: 1em;
    }
    label {
      display: inline-block;
      width: 3em;
    }
  `,
}
